<template>
	<view>
		<view class="zqs-open-head">
			<uni-nav-bar left-icon="left" color="#ffffff" backgroundColor="transparent" :statusBar="!0" :border="!1">
				<block slot="left">
					<image class="left_back" :src="$util.img('upload/uniapp/xxjk/back_white_icon@2x.png')"
						@click="$util.goBack()">
					</image>
				</block>
			</uni-nav-bar>
		</view>
		<view class="bonus-center"
			:style="{backgroundImage:`url(${$util.img('upload/uniapp/xxjk/bonusCenter/bonus_center_bgm2.png')})`}">
			<view class="stats">
				<view class="stats-item" v-for="item in statsField" @click="navigateTo(item.link)">
					<view class="stats-row">
						<view class="stats-title">{{item.title}}</view>
						<image class="icon32" v-if="item.link" @click="$util.redirectTo(item.link)"
							:src="$util.img('upload/uniapp/xxjk/bonusCenter/arrow_right@2x.png')" mode=""></image>
						<view class="stats-label" v-if="item.get" @click="openExchangeModal(item.getMode)">获取</view>
					</view>
					<view class="stats-value">{{statsValue[item.value] || '0'}}</view>
				</view>
			</view>

			<view class="list">
				<view class="list-title">分红订单记录</view>
				<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
					<!-- 数据列表 -->
					<view class="list-body" v-if="dataList.length > 0">
						<view class="order-item" v-for="item in dataList">
							<view class="order-head"
								:style="{backgroundImage:`url(${$util.img('upload/uniapp/xxjk/bonusCenter/order_head_bgm.png')})`}">
								<view class="order-no">订单号：{{item.order_no}}</view>
								<view class="order-status">{{item.is_out_text}}</view>
							</view>
							<view class="order-fields">
								<view class="field-row" v-for="fitem in orderItemFields">
									<view class="field-title">{{fitem.title}}</view>
									<view class="field-value-row">
										<view class="field-value">{{item[fitem.value]}}</view>
										<image v-if="fitem.link" class="icon32"
											@click="$util.redirectTo(fitem.link,{order_no:item.order_no})"
											:src="$util.img('upload/uniapp/xxjk/bonusCenter/arrow_right@2x.png')"
											mode="aspectFit">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else><ns-empty :isIndex="!1" :fixed="false" text="暂无数据"></ns-empty></view>
				</mescroll-body>
			</view>
			<uni-popup ref="modalExchange" type="bottom">
				<view class="modal-box">
					<image class="modal-close" @click="closeModal"
						:src="$util.img('upload/uniapp/xxjk/bonusCenter/modal_close.png')" mode="aspectFit">
					</image>
					<view class="modal-content" v-if="popParams.mode == 'cash'">
						<view class="modal-title">兑换数字资产</view>
						<view class="">
							<view class="modal-row">
								<view class="row-title">X数字资产价格</view>
								<view class="row-value">￥{{statsValue.x_value_price}}</view>
							</view>
							<view class="modal-row">
								<view class="row-title">可用x数字资产</view>
								<view class="row-value">{{exCashCoupon.order.surplus_x_value}}</view>
							</view>
							<view class="input-row" @click="openOrderSelect">
								<view class="input-value" v-if="exCashCoupon.order.order_no">
									订单号：{{exCashCoupon.order.order_no}}</view>
								<view class="input-value input-value-placeholder" v-else>请选择订单</view>
								<image class="icon32"
									:src="$util.img('upload/uniapp/xxjk/bonusCenter/arrow_down_fill@2x.png')"
									mode="aspectFit">
								</image>
							</view>
							<view class="input-row">
								<input class="input-value" type="number" v-model="exCashCoupon.point"
									placeholder-class="input-value-placeholder" placeholder="请输入需要兑换的X数字资产"
									@input="getPointNum" />

							</view>
							<view class="modal-tip red">约兑换数字资产：{{exCashCoupon.money}}</view>
						</view>
						<view class="modal-footer">
							<view class="modal-butt" @click="exchangeCoupon">兑换</view>
						</view>
					</view>
					<view class="modal-content" v-else>
						<view class="modal-title">转换金额</view>
						<view class="modal-row" style="justify-content: flex-start;">
							<view class="row-title">数字资产</view>
							<view class="row-value">￥{{statsValue.account5}}</view>
						</view>
						<view class="input-row">
							<input class="input-value" type="number" placeholder-class="input-value-placeholder"
								v-model="exBalance.account5" placeholder="请输入需要转换的数字资产数量" @input="inputConvertAccount" />


						</view>
						<view class="modal-tip">数字资产转换消费券比率为{{exBalance.money_conversion}}%，消费券仅支持消费</view>
						<view class="modal-tip red">可得消费券：{{exBalance.balance}}</view>
						<view class="modal-footer">
							<view class="modal-butt" @click="exchangeBalance">转换</view>
						</view>
					</view>
				</view>
			</uni-popup>
			<order-select ref="orderSelect" @change="confirmSelectOrder"></order-select>			
		</view>
		<pwd-popup ref="pwdPopup" @complete="confirmExchangeCoupon"></pwd-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll/mescroll-mixins.js";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import orderSelect from './components/order-select';
	import pwdPopup from '@/components/passwordp-opup/pwd-popup/pwd-popup.vue';
	export default {
		mixins: [MescrollMixin],
		components: {
			uniPopup,
			orderSelect,
			pwdPopup
		},
		data() {
			return {
				statsField: [{
					title: '可用X数字资产',
					value: 'x_value',
					link: '/xxjk/bonus/bonusRecord?mode=x_value'

				}, {
					title: 'X数字资产总价值',
					value: 'taday_value',
					link: '/xxjk/bonus/integralValue'
				}, {
					title: '金数字资产',
					value: 'gold_points',
					link: '/xxjk/bonus/pointRecord?mode=gold'
				}, {
					title: '剩余分红额度',
					value: 'surplus_bonus_amount',
					link: '/xxjk/bonus/bonusRecord?mode=rest'
				}, {
					title: '数字资产',
					value: 'account5',
					link: '',
					get: true,
					getMode: 'cash'
				}, {
					title: '消费券',
					value: 'balance',
					link: '',
					get: true,
					getMode: 'balance'
				}],
				orderItemFields: [{
					title: '分红值',
					value: 'dividends',
					link: ''
				}, {
					title: '累计金数字资产',
					value: 'total_gold_points',
					link: '/xxjk/bonus/pointRecord?mode=gold'
				}, {
					title: '分红额度',
					value: 'bonus_amount',
					link: ''
				}, {
					title: '分红额度消耗',
					value: 'gather_bonus_amount',
					link: '/xxjk/bonus/bonusRecord?mode=bonus'
				}, {
					title: '累计x数字资产',
					value: 'issued_dividends',
					link: ''
				}, {
					title: '今日消耗',
					value: 'expend_bonus_amount',
					link: '/xxjk/bonus/bonusRecord?mode=bonus'
				}, {
					title: '已兑换价值',
					value: 'expend_x_value',
					link: ''
				}, {
					title: '剩余x数字资产',
					value: 'surplus_x_value',
					link: '/xxjk/bonus/bonusRecord?mode=x_value'
				}],
				statsValue: {
					x_value: '',
					account5: '',
					gold_points: '',
					taday_value: '',
					bonus_amount: '',
					surplus_bonus_amount: '',
					gather_bonus_amount: '',
					balance: ''
				},
				dataList: [1, 2, 3],
				popParams: {
					mode: '',
				},
				exCashCoupon: {
					order: {},
					money: '',
					x_value: '',
					point: ''
				},
				exBalance: {
					account5: '',
					money_conversion: '',
					balance: ''
				}

			}
		},
		onShow() {
			this.getBonusData();
			this.getExchangeProportion(0)
		},
		methods: {
			openExchangeModal(value) {
				this.popParams.mode = value;
				this.exCashCoupon = {
					order: {},
					money: '',
					x_value: ''
				}
				this.exBalance = {
					account5: '',
					money_conversion: '',
					balance: ''
				}
				this.$refs.modalExchange.open()
			},
			closeModal() {
				this.$refs.modalExchange.close()
			},
			openOrderSelect() {
				this.$refs.orderSelect.open()
			},
			confirmSelectOrder(e) {
				this.exCashCoupon.order = e.value;
				this.$forceUpdate()
			},
			navigateTo(url) {
				this.$util.redirectTo(url)
			},
			getBonusData() {
				return new Promise((resolve, reject) => {
					this.$api.sendRequest({
						url: '/goldpoints/api/Record/bouns',
						data: {},
						success: (res) => {
							if (res.code == 0) {
								this.statsValue = res.data;
								resolve(res)
							} else {
								reject(res)
							}
						},
						fail: () => {}
					})
				})
			},
			upCallback(mescroll) {
				this.$api.sendRequest({
					url: '/goldpoints/api/Record/bounsRecordList',
					data: {
						page: mescroll.num,
						page_size: mescroll.size
					},
					success: (res) => {
						if (res.code == 0) {
							let newArr = res.data.list.map(item => {
								let is_out_text = '产出中'
								if (item.is_out == '2') {
									is_out_text = '待激活'
								} else if (item.is_out) {
									is_out_text = '结束'
								}
								return {
									...item,
									is_out_text
								}
							})
							if (mescroll.num == 1) this.dataList = [];
							this.dataList = [...this.dataList, ...newArr];
							this.exCashCoupon.order = this.dataList[0];
							this.mescroll.endSuccess(newArr.length);
						} else {
							this.mescroll.endErr();
						}
					},
					fail: () => {
						this.mescroll.endErr();
					}
				})
			},

			// 查询兑换所需数字资产
			getPointNum(e) {
				let value = e.detail.value;
				if (parseFloat(value) > parseFloat(this.exCashCoupon.order.surplus_x_value)) {
					value = this.exCashCoupon.order.surplus_x_value;
					this.exCashCoupon.point = value;
				}
				this.$api.sendRequest({
					url: '/goldpoints/api/Record/getPointsNum',
					data: {
						point: e.detail.value
					},
					success: (res) => {
						if (res.code == 0) {
							this.exCashCoupon.money = res.data.money;
						}
					},
					fail: () => {}
				})
			},
			inputConvertAccount(e) {
				let value = e.detail.value;
				if (parseFloat(value) > parseFloat(this.statsValue.account5)) {
					value = this.statsValue.account5;
					this.exBalance.account5 = value;
				}
				// this.exBalance.balance = value*this.exBalance.money_conversion;
				this.getExchangeProportion(value)
			},
			// 查询兑换比例与可得消费券
			getExchangeProportion(value) {
				this.$api.sendRequest({
					url: '/goldpoints/api/Record/getExchangeProportion',
					data: {
						account5: value
					},
					success: (res) => {
						if (res.code == 0) {
							let {
								money_conversion,
								balance
							} = res.data;

							this.exBalance = {
								...this.exBalance,
								money_conversion,
								balance
							}
						}
					},
					fail: () => {}
				})
			},
			// 兑换消费券
			exchangeBalance() {
				this.$api.sendRequest({
					url: '/goldpoints/api/Record/exchangeBalance',
					data: {
						account5: this.exBalance.account5

					},
					success: (res) => {
						if (res.code == 0) {
							this.getBonusData();
							this.closeModal();
							this.mescroll.resetUpScroll();
						}
						this.$util.showToast({
							title: res.message
						})
					},
					fail: () => {}

				})
			},
			// 兑换数字资产
			exchangeCoupon() {
				this.$refs.pwdPopup.show();
			},
			confirmExchangeCoupon() {
				this.$api.sendRequest({
					url: '/goldpoints/api/Record/exchangeCoupon',
					data: {
						order_no: this.exCashCoupon.order.order_no,
						point: this.exCashCoupon.point
					},
					success: (res) => {
						if (res.code == 0) {
							this.getBonusData();
							this.closeModal();
							this.mescroll.resetUpScroll();
						}
						this.$util.showToast({
							title: res.message
						})
					},
					fail: () => {}
			
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './public/css/common.scss';

	.zqs-open-head {
		position: fixed;
		z-index: 9999;
	}

	.left_back {
		width: 48rpx;
		height: 48rpx;
	}

	.icon32 {
		width: 32rpx;
		height: 32rpx;
	}

	.bonus-center {
		padding-top: 356rpx;
		background-size: 750rpx 764rpx;
		background-position: top center;
		background-repeat: no-repeat;
	}

	.stats {
		padding: 0 24rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		row-gap: 16rpx;
		column-gap: 14rpx;

		.stats-item {
			padding: 16rpx;
			position: relative;
			width: 224rpx;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.stats-row {
				@extend .flex;
			}

			.stats-title {
				font-weight: 400;
				font-size: 24rpx;
				color: #777777;
				line-height: 28rpx;
			}

			.stats-label {
				@extend .flex;
				position: absolute;
				right: 16rpx;
				width: 64rpx;
				height: 32rpx;
				background: #FC311A;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				border-radius: 32rpx 32rpx 32rpx 0;
			}

			.stats-value {
				font-family: Helvetica, Helvetica;
				font-weight: bold;
				font-size: 34rpx;
				color: #222222;
				line-height: 40rpx;
			}
		}
	}


	.list {
		margin-top: 36rpx;
		border-radius: 24rpx 24rpx 0 0;
		padding: 28rpx 24rpx;
		width: 750rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
		background-size: 100% 322rpx;
		background-repeat: no-repeat;

		.list-title {
			font-weight: 500;
			font-size: 32rpx;
			color: #222222;
			line-height: 38rpx;
		}

		.list-body {
			margin-top: 28rpx;
		}

		.order-item {
			margin-top: 20rpx;
			padding-bottom: 24rpx;
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;

			.order-head {
				@extend .flex;
				justify-content: space-between;
				padding: 0 24rpx;
				width: 702rpx;
				height: 96rpx;
				background-size: 100% 100%;
			}

			.order-no {
				@extend .flex;
				justify-content: flex-start;
				font-size: 26rpx;
				color: #222222;
				line-height: 30rpx;

				&:before {
					margin-right: 10rpx;
					content: '';
					width: 6rpx;
					height: 24rpx;
					background: #FC311A;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}
			}

			.order-status {
				font-size: 26rpx;
				color: #FC311A;
				line-height: 30rpx;
			}

			.order-fields {
				@extend .flex;
				padding: 0 24rpx;
				justify-content: space-between;
				flex-wrap: wrap;
				column-gap: 18rpx;
			}

			.field-row {
				@extend .flex;
				padding: 16rpx;
				margin-top: 16rpx;
				justify-content: space-between;
				width: 318rpx;
				height: 64rpx;
				background: #EEEEEE;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}

			.field-value-row {
				@extend .flex;
				justify-content: flex-end;
			}

			.field-title {
				font-size: 24rpx;
				color: #777777;
				line-height: 28rpx;
			}

			.field-value {
				font-size: 28rpx;
				color: #222222;
				line-height: 33rpx;
			}
		}
	}

	.modal-box {

		// height: 728rpx;
		.modal-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;

			.row-title,
			.row-value {
				font-size: 28rpx;
				color: #777777;
				line-height: 39rpx;
			}

			.row-value {
				color: #222222;
			}
		}

		.input-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			margin-bottom: 16rpx;
			margin-top: 24rpx;
			width: 686rpx;
			height: 88rpx;
			background: #F2F3F5;
			border-radius: 8rpx;
		}

		.input-value {
			font-weight: 400;
			font-size: 32rpx;
			color: #222222;
			flex-grow: 2;
		}

		/deep/.input-value-placeholder {
			color: #999999;
		}
	}
</style>